<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'设置'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "84">
        <div class="analyItem ">
        <p class="analyItemTit tx-center">题</p>
        <div class="analyItemCon">
            <p class="fl col-md-9 mb10">
                <span class="cLightGray pr8">问题</span>
                <span class="c999999"><input v-model="anProblem" type="text" style="width: 75%;" name="saveAnswerProblem"></span>
            </p>
            <p class="fl col-md-3 mb10">
                <span class="cLightGray pr8">阶段</span>
                <select v-model="stId"  class="width80" name="saveAnswerStage">
                    <option value="0">-请选择阶段-</option>
                    <option value="1">咨询</option>
                    <option value="2">认知</option>
                    <option value="3">考察</option>
                    <option value="4">签约</option>
                </select>
            </p>
            <p class="fl col-md-9 mb10">
                <span class="cLightGray pr8">答案</span>
                <span class="c999999"><textarea rows="2" v-model="anSolution" class="assessment-textarea" style="width: 75%;" name="saveAnswerSolution">
                </textarea></span>
            </p>
            <p class="fl col-md-3 mb10">
                <input @click="saveAnswer" type="button" value="确定" class=" uiBtn-blue uiBtn-small" style="margin-top: 20px; margin-left: 30px;" name="saveAnswer"></p>
        </div>
    </div>
    <div class="analyItem" v-for="(item,index) in List" :key="index">
            <p class="analyItemTit tx-center">问题</p>
        <!-- <div>     {{item.anId}}</div> -->
        <div class="analyItemCon" v-if="flg==0 && Number(anId) === Number(item.anId)">
            <!-- <p class="analyItemTit tx-center">编辑问题</p> -->
            <!-- <div class="analyItemCon"> -->
                <p class="fl col-md-8 mb10">
                    <span class="cLightGray pr8">问题</span>
                    <input type="text" class="anProblem" name="an_problem" style="width: 75%;" v-model="upAnProblem">
                </p>
                <p class="fl col-md-3 mb10">
                    <span class="cLightGray pr8">阶段</span>
                    <select v-model="upStId"  class="width80" name="saveAnswerStage">
                        <option value="0">-请选择阶段-</option>
                        <option value="1">咨询</option>
                        <option value="2">认知</option>
                        <option value="3">考察</option>
                        <option value="4">签约</option>
                    </select>
                </p>
                <p class="fl col-md-12 mb10">
                    <span class="cLightGray pr8">答案</span>
                    <textarea rows="2" class="assessment-textarea"  name="an_solution" style="width: 75%;" v-model="upAnSolution"></textarea>
                </p>
            <!-- </div> -->
            <div class="imgbox imgbox2 " style="margin-top: 15px; position: absolute; right: 10px;top: 10px;">
                <img src="https://gnr.rxjy.com/hrms/static/modules/cur/images/save_img.png" title="保存" width="20" class="fl pointer mr5" name="update_stage_info_intention" @click="updateAnswer()">
                <img src="https://gnr.rxjy.com/hrms/static/modules/cur/images/goback_img.png" title="返回" width="20" class="fl pointer mr5" @click="flg=1">
            </div>
        </div>

        <div class="analyItemCon" v-else>
            <p class="fl col-md-9 mb10"><span class="cLightGray pr8">问题</span> <span class="c999999">{{item.anProblem}}</span></p>
            <p class="fl col-md-1 mb10"><span class="roleFixed" style="color: #85da02;float: right;">{{item.stId | jieduan}}</span></p>
            <p class="fl col-md-12 mb10"><span class="cLightGray pr8">答案</span> <span class="c999999">{{item.anSolution}}</span></p>
            <div class="imgbox imgbox1 col-md-2" style="margin-top: 15px; position: absolute; right: 10px;top: 10px;">
                <img src="https://proj01.oss-cn-beijing.aliyuncs.com/worker/1582078336kn4XDPDSP0kpAj6YDzCNzzzd.png" title="删除" width="20" class="fr pointer mr5" @click="deleteAnswer(item.anId)">
                <img src="https://gnr.rxjy.com/hrms/static/modules/cur/images/edit_img.png" title="编辑" width="20" class="fr pointer mr5" @click="updateFlg(item, flg)">
            </div>
        </div>
    </div>
    </div>

            <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">

            </div>
        </div>
</div>
</template>
<script>
import {mapGetters, mapMutations} from 'vuex'
import { saveAnswer, getAnswerList, updateAnswer, deleteAnswer } from '../../Resources/Api/index'
export default {
    data () {
        return {
            flg: 1,
            List: '',
            anSolution: '',
            anProblem: '',
            upAnSolution: '',
            upAnProblem: '',
            stId: '0',
            upStId: 0,
            anId: 0
        }
    },
    created () {
        this.getAnswerList()
    },
    computed: {
        ...mapGetters(['leftInfo'])
    },
    methods: {
        ...mapMutations({
            setUpdatePlate: `SET_UPDATE_PLATE`
        }),
        deleteAnswer (value) {
            deleteAnswer({
                anId: Number(value)
            }).then(result => {
                if (Number(result.data.StatusCode) === 0) {
                    layer.msg('删除成功')
                    this.getAnswerList()
                    this.setUpdatePlate()
                }
            })
        },
        updateAnswer () {
            updateAnswer({
                stId: this.upStId,
                anId: this.anId,
                anProblem: this.upAnProblem,
                anSolution: this.upAnSolution
            }).then(result => {
                if (Number(result.data.StatusCode) === 0) {
                    layer.msg('修改成功')
                    this.updateFlg('', 0)
                    this.getAnswerList()
                    this.setUpdatePlate()
                }
            })
        },
        updateFlg (value, upFlg) {
            if (Number(upFlg) === 1) {
                this.flg = 0
                // debugger
                // console.log(value)
                this.anId = value.anId
                this.upStId = value.stId
                this.upAnProblem = value.anProblem
                this.upAnSolution = value.anSolution
            } else if (Number(upFlg) === 0) {
                this.flg = 1
                this.anId = 0
                this.upStId = 0
                this.upAnProblem = ''
                this.upAnSolution = ''
            }
        },
        getAnswerList () {
            getAnswerList({
                stId: this.leftInfo.stId
            }).then(res => {
                if (res.data.StatusCode === 0) {
                    this.List = res.data.Body.answers
                }
            }).catch(err => {
                console.log(err)
            })
        },
        saveAnswer () {
            saveAnswer({
                stId: this.stId, // 【用户阶段id(1.咨询 2认知 3考察 4签约)】
                anProblem: this.anProblem, // 【问题】
                anSolution: this.anSolution // 【答案】
            }).then(results => {
                if (results.data.StatusCode === 0) {
                    layer.msg('添加成功')
                    this.stId = 0
                    this.anSolution = ''
                    this.anProblem = ''
                    this.getAnswerList()
                    this.setUpdatePlate()
                }
            }).catch(error => {
                console.log(error)
            })
        }
    },
    filters: {
        jieduan: function (data) {
            if (data === 1) {
                return '咨询'
            } else if (data === 2) {
                return '认知'
            } else if (data === 3) {
                return '考察'
            } else if (data === 4) {
                return '签约'
            }
        }
    },
    watch: {
        leftInfo () {
            this.getAnswerList()
        },
        twoToThreeInfo () {
            this.getAnswerList()
        }
    }
}
</script>

